<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top:30px;
        }
    </style>
</head>
<body>
    <button id="btn1">开始</button>
    <button id="btn2">停止</button>
    <div class="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
    $("#btn1").click(function(){
        $(".box").animate({
            left:500
        },2000).animate({
            top:400
        },2000).animate({
            left:0
        },2000).animate({
            top:30
        },2000)
    })

    $("#btn2").click(function(){
        $(".box").stop(true, false)
    })



    // 动画队列
    // 正在执行
    // 等待执行

    // stop(参数1,参数2)
    // 参数1：等待执行的动画
        // true：清除等待执行的动画
        // false：没有清除等待执行的动画，默认值
    // 参数2：正在执行的动画
        // true：正在执行的动画，立即到终点
        // false：立即停止正在执行的动画，默认值
    
    
</script>
</html>